<template>
  <div class="demo">
    <div class="demo-title">反向</div>
    <div class="demo-content">
      <Slider v-model:value="value1" :reverse="reverse" />
      <Slider v-model:value="value2" range :reverse="reverse" />
      Reversed:
      <Switch v-model:checked="reverse" size="small" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Switch from '@sscd/switch';
  import Slider from '@sscd/slider';
  const value1 = ref<number>(30);
  const value2 = ref<[number, number]>([20, 50]);
  const reverse = ref<boolean>(true);
</script>
